<template>
  <div style="padding: 10px">
      <el-input style="width: 300px" placeholder="请输入名称..." v-model="name1" clearable></el-input>
      <el-button type="primary" @click="search" style="margin-left: 5px">查询数据</el-button>
      <el-button type="primary" @click="handleAdd">新增数据</el-button>
      <el-button type="primary" @click=" getFormation">获取数据</el-button>
      <el-select v-model="value"  @change="searchSelect(value)"  placeholder="请选择算法" size="large" style="margin-left: 10px;">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
  <!-- <el-button type="primary" @click="created" style="margin-left: 10px;">确定</el-button> -->
      <div style="margin: 10px 0">
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column fixed prop="department" label="Department" width="120" />
    <el-table-column prop="major" label="Major" width="100" />
    <el-table-column prop="classes" label="Classes" width="100" />
    <el-table-column prop="id" label="Id" width="100" />
    <el-table-column prop="name" label="Name" width="100" />
    <el-table-column prop="a" label="数据结构" width="100" />
    <el-table-column prop="b" label="计原" width="100" />
    <el-table-column prop="c" label="大学英语" width="100" />
    <el-table-column prop="d" label="java" width="100" />
    <el-table-column prop="e" label="概率论" width="100" />
    <el-table-column prop="f" label="大学物理" width="100" />
    <el-table-column prop="aver" label="学分绩" width="100" />
    <el-table-column prop="rank" label="排名" width="100" />
              <el-table-column label="操作" width="100">
                  <template #default="scope">
                      <!-- <el-button link type="primary" size="small" @click="handleEdit(scope.row,scope.$index) ">编辑 -->
                      <el-button link type="primary" size="small" @click="handleEdit ">编辑
                      </el-button>
                      <el-button link type="danger" size="small" @click.prevent="remove(scope.$index)">删除</el-button>
                  </template>
              </el-table-column>
          </el-table>
      </div>
      <!-- 分页查询 page size 当前页展示信息数量 total 总数量 change 当前页数改变时候触发 -->
      <el-pagination
     :page-size="pageSize" 
    :pager-count="11"
    layout="prev, pager, next"
    :total="pageTotal"
    @current-change="changePage"
  >
    </el-pagination>
      <!--弹窗-->
      <el-dialog v-model="dialogFormVisible" title="信息" width="40%">
          <el-form :model="form" label-width="100px" style="padding-right:30px ">
              <el-form-item label="学院">
                  <el-input v-model="form.department" autocomplete="off"/>
              </el-form-item>
              <el-form-item label="专业">
                  <el-input v-model="form.major" autocomplete="off"/>
              </el-form-item>
              <el-form-item label="班级">
                  <el-input v-model="form.classes" autocomplete="off"/>
                </el-form-item>
              <el-form-item label="学号">
                  <el-input v-model="form.id" autocomplete="off"/>
                </el-form-item>
              <el-form-item label="姓名">
                  <el-input v-model="form.name" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="数据">
                  <el-input v-model="form.a" autocomplete="off"/>
                </el-form-item>
              <el-form-item label="计原">
                  <el-input v-model="form.b" autocomplete="off"/>
                </el-form-item>
              <el-form-item label="英语">
                  <el-input v-model="form.c" autocomplete="off"/>
                </el-form-item>
              <el-form-item label="java">
                  <el-input v-model="form.d" autocomplete="off"/>
                </el-form-item>
              <el-form-item label="概论">
                  <el-input v-model="form.e" autocomplete="off"/>
                </el-form-item>
              <el-form-item label="大物">
                  <el-input v-model="form.f" autocomplete="off"/>
              </el-form-item>
              <el-form-item label="学分绩">
                  <el-input v-model="form.aver" autocomplete="off"/>
              </el-form-item><el-form-item label="排名">
                  <el-input v-model="form.rank" autocomplete="off"/>
              </el-form-item>
          </el-form>
          <template #footer>
    <span class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取消</el-button>
      <el-button type="primary" @click="postFormation">确认</el-button>
    </span>
          </template>
      </el-dialog>
  </div>
</template>
<script >

  import {reactive, ref} from "vue";
  const axios = require('axios');
  // import { ref } from 'vue'
  export default{
    data(){
      return{  
        pageSize: 10,
        pageTotal:1600,
        pageNumber:2,
   options:[
  {
    value: 'B+树',
    label: 'B+树',
  },
  {
    value: '二叉排序树',
    label: '二叉排序树',
  },
  {
    value: '数组',
    label: '数组',
  }
],
   dialogFormVisible: ref(false),
   form : reactive({}),
   globalIndex : ref(-1),
   name1: ref(''),
value:ref(''),
  tableData:[
  ]
      }
    },
    methods: {
       searchSelect(value){
    if(value==='二叉排序树')
    {const params={ way:'二叉排序树'
    }
      axios.post('http://localhost:3000/posts',params)}

    if(value==='B+树')
    {
      const params={  way:'B+树'}
      axios.post('http://localhost:3000/posts',params)}
    if(value==='数组')
    {const params={  way:'数组'}
      axios.post('http://localhost:3000/posts',params)}
      console.log(value)
    },
    //新增数据 设置新的空的绑值对象 打开弹窗
   handleAdd (){
      this.form = reactive({})
      //打开弹窗
      this.dialogFormVisible = true
  },
     //保存数据，把数据插入到tableData中，并刷新页面，弹窗关闭
     save(){
      if (this.globalIndex>= 0) {
          //表示编辑
          this.tableData[this.globalIndex] = this.form
          //还原回去
          this.globalIndex = -1
      } else {
          //新增
          this.tableData.push(this.form)
          this.dialogFormVisible = false
      }
      
  },
    //编辑数据 先赋值到表单再弹窗
  handleEdit(row, index){
      const newObj = Object.assign({}, row)
      this.form = reactive(newObj)
      //把当前编辑的行号赋值给全局保存的行号
      this.globalIndex = index
      // console.log(this.globalIndex)
      this.dialogFormVisible = true
  },
    //删除数据 从index位置开始，删除一行即可
  remove(index){
    console.log(this.tableData[index]);
    const params={      department: this.tableData[index].department,
    major: this.tableData[index].major,
      classes: this.tableData[index].classes,
      id: this.tableData[index].id,
      name: this.tableData[index].name,
      a: this.tableData[index].a,
      b: this.tableData[index].b,
      c: this.tableData[index].c,
      d: this.tableData[index].d,
      e: this.tableData[index].e,
      f: this.tableData[index].f,
      aver: this.tableData[index].aver,
      rank: this.tableData[index].rank}
      const res=axios.post('http://localhost:3000/posts',params)
      console.log('res',res)
				// 设置回调函数，接收返回的响应对象
				// 异步操作成功时，执行的回调函数
				res.then(response=>{
					console.log('请求成功:')
					console.log('respnse',response)
				})
				// 异步操作失败时，执行的回调函数
				res.catch(error=>{
					console.log('请求失败:')
					// console.log('error:',error)
					console.log('请求失败响应对象获取',error.response)
				})
    }
,
    //查询数据
   search(){
      // this.tableData = this.tableData.filter(v =>v.name.includes(this.name1))
      console.log(this.name1);
      const params={
        name:this.name1
      }
      axios.post('http://localhost:3000/posts',params)

  },
  // 获取信息
  getFormation(){
      axios({
        method:"GET",
        url:'http://localhost:3000/posts',
      }).then(res=>{
        console.log(res.data);
        this.tableData=res.data
        //同时还要获取page和pagetotal
      })
    },
    //编辑和增加数据的发送函数
    postFormation(){
      const params={
          department: this.form.department,
    major: this.form.major,
      classes: this.form.classes,
      id: this.form.id,
      name: this.form.name,
      a: this.form.a,
      b: this.form.b,
      c: this.form.c,
      d: this.form.d,
      e: this.form.e,
      f: this.form.f,
      aver: this.form.aver,
      rank: this.form.rank
				}
				// 登录的post请求
				const res = axios.post('http://localhost:3000/posts',params)
				console.log('res',res)
				// 设置回调函数，接收返回的响应对象
				// 异步操作成功时，执行的回调函数
				res.then(response=>{
					console.log('请求成功:')
					console.log('respnse',response)
				})
				// 异步操作失败时，执行的回调函数
				res.catch(error=>{
					console.log('请求失败:')
					// console.log('error:',error)
					console.log('请求失败响应对象获取',error.response)
				})
        this.dialogFormVisible = false
    },
    changePage(p)
      {
        console.log(p)
        this.pageNumber=p;

      }
  }
}
</script>